<template>
  <Layout>
    <Layout>
      <!--    轮播-->
      <Row>
        <Carousel autoplay :autoplay-speed=times v-model="value2" loop>
          <CarouselItem>
            <div class="demo-carousel">
              <img :src=imgs[0] alt="">
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img :src=imgs[1] alt="">
            </div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel">
              <img :src=imgs[2] alt="">
            </div>
          </CarouselItem>
        </Carousel>
      </Row>
    </Layout>
    <Layout>
      <Sider hide-trigger>
        <!--        主体左侧-->
        <Menu style="width: auto" :theme="theme1" active-name="1">
          <MenuGroup title="第一部分">
            <MenuItem name="1">
              <Icon type="md-document" />
              文章管理
            </MenuItem>
            <MenuItem name="2">
              <Icon type="md-chatbubbles" />
              评论管理
            </MenuItem>
          </MenuGroup>
          <MenuGroup title="第二部分">
            <MenuItem name="3">
              <Icon type="md-heart" />
              用户留存
            </MenuItem>
            <MenuItem name="4">
              <Icon type="md-leaf" />
              流失用户
            </MenuItem>
          </MenuGroup>
        </Menu>
      </Sider>
      <Content>
        <!--        右侧菜单-->
        <!--    第一层    -->
        <Row>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
        </Row>
        <!--    第二层    -->
        <Row>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
          <Col span="8">
            <Card style="width:350px">
              <p slot="title">
                <Icon type="ios-film-outline"></Icon>
                Classic film
              </p>
              <div style="height: 300px">
                <img style="width: 100%" :src=imgs[0] alt="">
              </div>
            </Card>
          </Col>
        </Row>
      </Content>
    </Layout>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      theme1:'light',
      value2:0,
      times:3000,
      imgs:[require("../assets/1.jpeg"),require("../assets/2.jpeg"),require("../assets/3.jpeg")],
    }
  },
  methods: {},
  components: {}
}
</script>
<style>

</style>
